<template>
  <div class="category">
    <swiper class="cate-data" :options="options">
      <swiper-slide v-for="v in services" :key="v.serviceId">
        <router-link class="cate-item" tag="div" :to="{path: '/masters', query: {serviceId: v.serviceId}}">
          <figure>
            <img :src="$store.state.domain + v.icon">
          </figure>
          <p>{{v.serviceName}}</p>
        </router-link>
      </swiper-slide>
      <swiper-slide>
        <router-link class="cate-item" tag="div" to="/services">
          <figure>
            <img src="@/assets/master/all@2x.png">
          </figure>
          <p>全部分类</p>
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <stars title="订单最多" type="2"></stars>
    <stars title="用户推荐" type="1"></stars>
    <stars title="最新入住" type="3"></stars>

    <m-footer />
  </div>
</template>

<script>
import stars from "@/components/stars";
import mFooter from "@/components/footer";

export default {
  components: {
    stars,
    mFooter
  },
  data() {
    return {
      options: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        slidesPerColumn: 2,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      services: []
    };
  },
  methods: {
    getServices() {
      this.$http.fetchGet("getServiceListSimple", {
        limit: 15
      }).then(({ data }) => {
        console.log("服务列表", data);
        this.services = data;
      });
    }
  },
  created() {
    this.getServices();
  }
};
</script>

<style scoped lang="less">
.category {
  .pb(@fheight);
  .cate-data {
    .bb20();
    .pb(40);
    .cate-item {
      .pt(30);
      .pb(30);
      &:active {
        background-color: @bgColor;
      }
      figure img {
        display: block;
        margin: 0 auto;
        .w(64);
        .h(64);
      }
      p {
        .f24;
        .pt(30);
        text-align: center;
      }
    }
  }
}
</style>
